<!-- 
	This is the default layout, used in sign-in and sign-up pages.
 -->

<template>
	<div >

		<!-- Default Layout -->
		<a-layout class="layout-default" id="layout-default" :class="[layoutClass]"  >

			<!-- Layout Header ( Navbar ) -->
			<DefaultHeader class="animate__animated animate__fadeIn"></DefaultHeader>
			<!-- / Layout Header ( Navbar ) -->


			<!-- Page Content -->
			<a-layout-content >
				<router-view />
			</a-layout-content>
			<!-- / Page Content -->

			<!-- Layout Footer -->
			<DefaultFooter  :style="{marginTop: foot}"></DefaultFooter>
			<!-- / Layout Footer -->

		</a-layout>
		<!-- / Default Layout -->

	</div>
</template>

<script>

	import DefaultHeader from '../components/Headers/DefaultHeader' ;
	import DefaultFooter from '../components/Footers/DefaultFooter' ;

	export default ({
		components: {
			DefaultHeader,
			DefaultFooter,
		},
		data() {
			return {
        windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
        windowHeight: document.documentElement.clientHeight, //实时屏幕高度
        footData:{
          marginTop: 1080 - this.windowHeight + 350
        },
        foot: (window.fullHeight) + 'px'
			}
		},
		computed: {
			// Sets layout's element's class based on route's meta data.
			layoutClass() {
				return this.$route.meta.layoutClass ;
			}
		},



    watch: {
      windowHeight (val) {
        let that = this;
        // console.log("实时屏幕高度：",val, that.windowHeight );
      },
      windowWidth (val) {
        let that = this;
        // console.log("实时屏幕宽度：",val, that.windowHeight );
      }
    },

    mounted() {

		  this.foot = (document.documentElement.clientHeight- 1080 + 300) + 'px';
      var that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          window.fullWidth = document.documentElement.clientWidth;
          that.windowHeight = window.fullHeight;  // 高
          that.windowWidth = window.fullWidth; //// 宽
          that.foot = (window.fullHeight - 1080 + 300) + 'px';
        })()
      };
    },
    methods:{

    }
	})

</script>

<style lang="scss">
@media screen and (min-height: 1080px) {
.foot{
  margin-top: 350px;
}
}

</style>

